<template>
  <div class="el-form-item__content">
    <div class="el-input" :class="disabled ? 'is-disabled':''">
      <input type="text" :class="size" :disabled="disabled" @blur="checkNum" :value="value" :placeholder="placeholder" :maxlength="maxlength" @input="onInput($event)" class="el-input__inner">
    </div>
  </div>
</template>

<script type="text/babel">
  /**
   * 数字输入框
   * type 为normal 时表示只能输入数字， type 为 dot 时 表示可以出现小数点
   */
  export default {
    name: 'InputNumber',
    props: {
      value: {
        type: [String, Number],
      },
      placeholder: {},
      maxlength: {},
      type: {
        default: 'normal'
      },
      disabled: {
        type: Boolean,
        default: false
      },
      size: {
        type: String,
        default: ''
      },
      blurValue: {
        type: Number
      }
    },

    data() {
      return {
        input: ''
      }
    },
    mounted() {
      this.input = this.value
    },

    methods: {
      onInput(e) {
        if (this.type == 'normal') {
          var str = e.target.value.replace(/\D/ig, '')
        } else {
          var str = e.target.value.replace(/[^0123456789.]/ig, '')
        }
        e.target.value = str
        this.input = str
        this.$emit('input', str)
      },
      checkNum(e){
        if(this.blurValue){
          if (!e.target.value || e.target.value == 0) {
            e.target.value = this.blurValue
            this.input = this.blurValue
            this.$emit('blur', this.blurValue);
          }
        }
        if(this.blurValue == 0){
          if (!e.target.value) {
            e.target.value = this.blurValue
            this.input = this.blurValue
            this.$emit('blur', this.blurValue);
          }
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
.el-form-item__content{
  display: inline-block
}
.el-input__inner{
  height: 34px;
  line-height: 34px;
}
.medium{
  width: 224px;
}
// .el-input{
//   width: auto;
// }
.mini {
  width: 60px;
}
.small{
  width: 180px;
}
.medium {
  width: 200px;
}
.large{
  width: 224px;
}
</style>
